<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>民革微信矩阵</title>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
  <meta name="keywords" content="民革微信矩阵"/>
  <meta name="description" content="民革微信矩阵"/>
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/jquery-weui.min.css">
  <link rel="stylesheet" href="css/weui.min.css">
  <link rel="stylesheet" href="css/swiper.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/mobile.js"></script>
  <!-- Demo styles -->
  <style>
  html,
  body {
    position: relative;
    height: 100%;
  }
  body {
    background: #fff;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
    background:url('images/bg01.jpg') no-repeat;
    background-size:100% 100%;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-pagination-bullet-active{
    background-color:#f30100;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
   /* display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;*/
    /*-webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
    overflow:hidden;
  }
  .caption-box {
    width: 70%;
    left: 50%;
    margin-left: -35%;
    padding-top: 5%;
  }
  .icon-box {
    bottom: 0;
    width: 100%;
    padding: 5% 0 10%;
    box-sizing: border-box;
   }
   .down01{
	position: absolute;
    bottom: 1%;
    font-size:12px;
    width: 30px;
    height: 20px;
    margin-top: -25px;
    z-index: 10;
    background-image: url(images/arrow.png);
    left: 50%;
    color:#666;
    margin-left: -15px;
    background-size: 30px 15px;
    background-position: center;
    background-repeat: no-repeat;
    transform:translateX(-50%);
	/*transform:rotate(180deg);*/
	animation:down01 1.5s infinite ease-in-out;
	-webkit-animation:down01 1.5s infinite ease-in-out;
	}
	@keyframes down01{
		0% {transform:translateY(0px);-webkit-transform:translateY(0px);opacity:0.5;-webkit-opacity:1}
		100% {transform:translateY(-40%);-webkit-transform:translateY(-40%);opacity:1;-webkit-opacity:0}
	}
	@-webkit-keyframes down01{
		0% {transform:translateY(0px);-webkit-transform:translateY(0px);opacity:0.5;-webkit-opacity:1}
		100% {transform:translateY(-40%);-webkit-transform:translateY(-40%);opacity:1;-webkit-opacity:0}
	}
	/*.cover-pop-con{width:100%;background:rgba(0,0,0,0.9);height:100vh;z-index:999}
	.cover-img1{width:50%;top:40%;left:50%;margin-left:-35%;
		animation:down01 1s infinite linear;
		-webkit-animation:down01 1s infinite linear;}
	.cover-img2{width:8%;top:25%;right:30%;margin-left:-40%}
	.cover-txt{color:#fff;bottom:5%;font-size:0.7rem;text-align:center;width:100%}*/
  </style>
</head>
<body>
  <!-- 微信缩略图 -->
  <div class="Abs" style="width:0;height:0;overflow:hidden;">
    <img src="images/001.png">
  </div>
  <!-- 标题-->
  <!-- <div class="cover-pop-con Fix coverIdx" style="display:none;">
  	<img class="Abs cover-img1" src="images/up_img.png">
  	<img class="Abs cover-img2" src="images/jt_img.png">
  	<span class="Abs cover-txt">上下滑动即可翻页</span>
  </div> -->
  <div class="caption-box Fix" style="z-index:9">
    <img class="caption-icon caption01" src="images/caption_01.png">
    <img class="caption-icon caption02" src="images/caption_02.png">
  </div>
  <!-- Swiper -->
  <div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
      <!-- 第一页 -->
      <div class="swiper-slide page1 Rel">
        <div class="icon-box Abs">
        	<ul class="icon-con Clear">
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0MzQ2MTk4Mw==&scene=123#wechat_redirect">
        				<img class="icon-img" src="images/icon/01bj.png">
        				<p class="icon-txt">北京</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4MzczMDA2Ng==#wechat_redirect">
        				<img class="icon-img" src="images/icon/02tj.png">
        				<p class="icon-txt">天津</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4ODYzMDA3NQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/03hb.png">
        				<p class="icon-txt">河北</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI3ODcwODgyNA==&scene=126&bizpsid=0#wechat_redirect">
        				<img class="icon-img" src="images/icon/04sx.png">
        				<p class="icon-txt">山西</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUzMTkyMjEwNQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/05nmg.png">
        				<p class="icon-txt">内蒙古</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAxNjgxMzYxMg==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/06ln.png">
        				<p class="icon-txt">辽宁</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIxOTM2Mzk0Nw==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/07jl.png">
        				<p class="icon-txt">吉林</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI5OTcxMjc4Ng==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/08hlj.png">
        				<p class="icon-txt">黑龙江</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIzODUxMDM0NQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/09sh.png">
        				<p class="icon-txt">上海</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIzMDk0NTIyOQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/10js.png">
        				<p class="icon-txt">江苏</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI5MDM0NzEzNQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/11zj.png">
        				<p class="icon-txt">浙江</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU1NDU2MTgxMA==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/12ah.png">
        				<p class="icon-txt">安徽</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU1NjE2MTU2Mg==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/13fj.png">
        				<p class="icon-txt">福建</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwMTU0NzU5Nw==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/14jx.png">
        				<p class="icon-txt">江西</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzUxMjY1MTcxMQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/15sd.png">
        				<p class="icon-txt">山东</p>
        			</a>
        		</li>
        	</ul>
        </div>
      </div>
      <!-- 2-1 -->
      <div class="swiper-slide page2 Rel">
        <div class="icon-box Abs">
        	<ul class="icon-con Clear">
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI5ODU1NzA5OA==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/16hn.png">
        				<p class="icon-txt">河南</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTA3MjMyNg==&scene=126&bizpsid=0#wechat_redirect">
        				<img class="icon-img" src="images/icon/17hb.png">
        				<p class="icon-txt">湖北</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI0ODM1NDA2Ng==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/18hn.png">
        				<p class="icon-txt">湖南</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5ODAyOTM5NQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/19gd.png">
        				<p class="icon-txt">广东</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI3MDU4MTUwOQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/20gx.png">
        				<p class="icon-txt">广西</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3OTg0OTY0Mg==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/21hn.png">
        				<p class="icon-txt">海南</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5NDAxODIyNw==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/22cq.png">
        				<p class="icon-txt">重庆</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzIzNTg4NDkxMg==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/23sc.png">
        				<p class="icon-txt">四川</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA5NDUwODkyMw==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/24gz.png">
        				<p class="icon-txt">贵州</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU4MzMyNDcxNQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/25yn.png">
        				<p class="icon-txt">云南</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg4NDA0NjM4MQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/26sx.png">
        				<p class="icon-txt">陕西</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4Nzk3NzU2MA==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/27gs.png">
        				<p class="icon-txt">甘肃</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
							<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU5NTcxMTMxMw==&scene=123#wechat_redirect">
        				<img class="icon-img" src="images/icon/28qh.png">
        				<p class="icon-txt">青海</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwMTMyNjY0OA==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/29nx.png">
        				<p class="icon-txt">宁夏</p>
        			</a>
        		</li>
        		<li class="icon-list Fl">
        			<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA3MzQwODgwMQ==&scene=124#wechat_redirect">
        				<img class="icon-img" src="images/icon/30xj.png">
        				<p class="icon-txt">新疆</p>
        			</a>
        		</li>
        	</ul>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination1"></div>
    <!-- Add Arrows -->
    <div class="down01"></div>
   <!--  <div class="swiper-button-prev"></div> -->
  </div>
  <!-- Swiper JS -->
  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>
  <script src="js/fastclick.js"></script>
  <script src="js/jquery-weui.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
 //  var ua = navigator.userAgent.toLowerCase();
	// if(ua.match(/MicroMessenger/i)=="micromessenger") {
	//     return true;
	// } else {
	//     return false;
	// }
  
  $(function(){
		setTimeout(function(){
			var winW = $(window).width();
			var winH = $(window).height();
			var capH = $('.caption-box').height();
			var iconH = $('.icon-box').height(winH-capH);
			if(winW/winH>0.65){
				$('.icon-img').css({'margin-bottom':'0','width':'40%'});
				// $('.icon-box').css('padding','5% 0 10%');
			}
		},500)
  })
  $(window).resize(function(){
  	if(winW/winH>0.65){
		$('.icon-img').css({'margin-bottom':'0','width':'40%'});
		// $('.icon-box').css('padding','5% 0 10%');
	}
	var winW = $(window).width();
	var winH = $(window).height();
	var capH = $('.caption-box').height();
	var iconH = $('.icon-box').height(winH-capH);
  });
  var swiper = new Swiper('.swiper-container1', {
    direction: "vertical",
    mousewheel:true,
    // effect: 'flip',
    grabCursor:true,
    pagination: {
      el: '.swiper-pagination1',
      type: 'progressbar',
    },
    navigation: {
      nextEl: '.swiper-button-next1',
      // prevEl: '.swiper-button-prev',
    },
    on:{
      init: function(){
        swiperAnimateCache(this); //隐藏动画元素 
        swiperAnimate(this); //初始化完成开始动画
      }, 
      slideChangeTransitionEnd: function(){ 
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
      },
      slideChangeTransitionStart: function(){
        // 第二屏幕帷幕消失
        // if(this.activeIndex==1){
        //   var pg7 =$('.pg2-7');
        //   var kaiMu = setTimeout(function(){
        //     pg7.hide();
        //   },2000);
        // };
        //最后一屏隐藏按钮
        this.activeIndex == 1?$('.down01').hide():$('.down01').show();
      },
    }
  });
//   $(document).on("click", ".showSx2", function() {
//     $.alert("暂未开通，敬请期待！", "温馨提示");
//   });
  // $(document).on("click", ".showQh", function() {
  //   $.alert("暂未开通，敬请期待！", "温馨提示");
  // });
  $('.coverIdx').on('click',function(){
  	$(this).hide();
  })
  // setTimeout(function(){
  // 	 $('.coverIdx').hide();
  // },3000);

// 检测localStorage中是否已有缓存
// if(!window.name) {
//     console.log("第一次打开");
//     $('.coverIdx').show();
//     window.name = "myname"
//     localStorage.clear();
// }else{
// 	$('.coverIdx').hide();
// }

  </script>
</body>

</html>